<template>
	<view class="home">
		<!-- 头部nav-bar -->
		<nav-bar></nav-bar>

		<!-- 轮播 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in swieprList" :key="index">
				<view class="swiper-item">
					<image :src="item"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 7.限时优惠布局 -->
		<scroll-view scroll-x>
			<view class="scroll-x">
				<image :src="item" mode="widthFix" v-for="(item, index) in swieprList" :index="index"></image>
			</view>
		</scroll-view>
		<!-- 8.精选的布局 -->
		<view class="list">
			<list-item @addCarList="addCarList" style="width: 48%;" v-for="(item, index) in list" :key="index" :item="item"></list-item>
		</view>
	</view>
</template>


<script>
	import { mapMutations } from 'vuex';
	export default {
		data() {
			return {
				swieprList: [
					'../../static/images/banner/1.png',
					'../../static/images/banner/2.png',
					'../../static/images/banner/3.png',
					'../../static/images/banner/4.png',
				],
				list: [],
				page: 1
			}
		},
		methods: {
			...mapMutations('car', ['addCarList']),
			getList() {
				uni.request({
					url: 'http://localhost:3000/list',
					data: {
						_page: this.page
					}
				}).then(([error, resp]) => {
					if (this.page === 1) {
						this.list = resp.data
					} else {
						this.list = this.list.concat(resp.data)
					}
				})
			}
		},
		onLoad() {
			this.getList();
		},
		// 上啦触底
		onReachBottom() {
			this.page++;
			this.getList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.getList()
		}
	}
</script>


<style lang="scss" scoped>
	.home {
		padding: 0 20rpx;

		.swiper {
			width: 100%;
			height: 400rpx;

			image {
				width: 100%;
				height: 400rpx;
			}
		}

		.scroll-x {
			display: flex;
			flex-wrap: nowrap;
			margin: 20rpx 0;

			image {
				width: 70%;
				height: 200rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 10rpx;
		}
	}
</style>